<template>
  <div>
    <z-main :loading="loading" :has-back="false" :selected-item="2">
      <panel 
          type="2" header="长沙政府新闻" 
          slot="main"
          :footer="footer" 
          :list="likesList" 
          @on-click-footer="loadMore" 
          @on-click-item="showDetaile"
        >
      </panel>
    </z-main>
    <transition name="router-slid">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import {Panel} from 'vux'
import ZMain from '@/pages/zmain'
import {likesList} from '@/service/getData'
export default {
  data () {
    return {
      loading:false,
      selected:'tab1',
      likesList:[],
      nextPage:1,
      footer: {
        title: '查看更多',
      }
    }
  },
  mounted(){
    this.loadNews(1);
  },
  components:{
    ZMain,Panel
  },
  methods:{
    loadNews(page) {
      this.loading = true;
      // 获取兴趣新闻列表
      likesList(page).then(res => {
        let r = res.data.map(item => ({
          title: item.title,
          articleUrl: item.url,
          time: item.time,
          desc: item.time + item.desc
        }));
        this.likesList.push(...r);
        this.loading = false;
        this.nextPage++;
      })
    },
    loadMore(){
      this.loadNews(this.nextPage);
    },
    showDetaile(item){
      this.$router.push({
        name: 'newsDetail',
        query: {
          articleUrl: item.articleUrl,
          time: item.time,
          title: item.title,
        }
      })
      // alert(item.articleUrl);
    }
  },
  watch: {},
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>

</style>
